<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<!-- 引入 ECharts 文件 -->
	<script src="js/echarts.js"></script>

</head>

<body>
	<!---为ECharts准备一个具备大小（宽高）的DOM--->
	<div id="main" style="width: 500px; height: 400px"></div>
	<script type="text/javascript">
		//基于准备好的DOM，初始化ECharts图表
		var myChart = echarts.init(document.getElementById("main"));
		//指定图表的配置项和数据
		var option = {  //指定图表的配置项和数据
			backgroundColor: 'rgba(204,204,204,0.7)',  //配置背景色，默认无背景
			title: {  //配置标题组件
				text: '各教育阶段男女人数统计',
				target: 'blank', top: '10', left: '160', textStyle: { color: 'blue', fontSize: 18, }
			},
			legend: {  //配置图例组件
				show: true,  //设置是否显示图例
				icon: 'rect',  //icon.'circle'|'rect'|'roundRect'|'triangle'|'diamond'|'pin'|'arrow'|'none'
				top: '14',  //设置图例距离顶部边距
				left: 430,  //设置图例距离左侧边距
				itemWidth: 10,  //设置图例标记的图形宽度
				itemHeight: 10,  //设置图例标记的图形高度
				itemGap: 30,  //设置图例每项之间的间隔
				orient: 'horizontal',  //设置图例列表的布局朝向，'horizontal'|'vertical'
				textStyle: { fontSize: 15, color: '#fff' }, //设置图例的公用文本样式
				data: [  //设置图例的数据数组，数组项通常为字符串，每项代表一个系列name
					{
						name: '男', icon: 'rect',
						textStyle: { color: 'rgba(51,0,255,1)', fontWeight: 'bold' }
					},  //设置图例项的文本样式
					{
						name: '女', icon: 'rect',
						textStyle: { color: 'rgba(255,0,0,1)', fontWeight: 'bold' }
					}  //'normal'|'bold'|'bolder'|'lighter'
				],
			},
			tooltip: {  //配置详情提示框组件
				//设置雷达图的tooltip不会超出div，也可设置position属性
				//设置定位不会随着鼠标移动而变化
				confine: true,  //设置是否将tooltip框限制在图表的区域内
				enterable: true,  //设置鼠标是否可以移动到tooltip区域内
			},
			radar: [{  //配置雷达图坐标系组件，只适用于雷达图
				center: ['50%', '56%'],  //设置中心坐标，数组的第1项是横坐标，第2项是纵坐标
				radius: 160,  //设置圆的半径，数组的第一项是内半径，第二项是外半径
				startAngle: 90,  //设置坐标系起始角度，也就是第一个指示器轴的角度
				name: {  //设置（圆外的标签）雷达图每个指示器名称
					formatter: '{value}',
					textStyle: { fontSize: 15, color: '#000' }
				},
				nameGap: 2,  //设置指示器名称和指示器轴的距离，默认为15
				splitNumber: 2,  //设置指示器轴的分割段数，default
				//shape:'circle',  //设置雷达图绘制类型，支持'polygon','circle'
				//设置坐标轴轴线设置
				axisLine: { lineStyle: { color: '#fff', width: 1, type: 'solid', } },
				//设置坐标轴在grid区域中的分隔线
				splitLine: { lineStyle: { color: '#fff', width: 1, } },
				splitArea: {
					show: true,
					areaStyle: { color: ['#abc', '#abc', '#abc', '#abc'] }
				},  //设置分隔区域的样式
				indicator: [  //配置雷达图指示器，指定雷达图中的多个变量，跟data中value对应
					{ name: '高中', max: 9000000 }, { name: '专科', max: 5000000 },
					{ name: '本科', max: 3500000 }, { name: '硕士', max: 800000 },
					//设置指示器的名称，最大值，标签的颜色
					{ name: '博士', max: 20000 }]
			}],
			series: [{
				name: '雷达图',  //系列名称，用于tooltip的显示，图例筛选
				type: 'radar',  //系列类型: 雷达图
				//拐点样式，'circle'|'rect'|'roundRect'|'triangle'|'diamond'|'pin'|'arrow'|'none'
				symbol: 'triangle',
				itemStyle: {  //设置折线拐点标志的样式
					normal: { lineStyle: { width: 1 }, opacity: 0.2 },  //设置普通状态时的样式
					emphasis: { lineStyle: { width: 5 }, opacity: 1 }  //设置高亮时的样式
				},
				data: [  //设置雷达图的数据是多变量(维度)
					{   //设置第1个数据项
						name: '女',  //数据项名称
						value: [4400000, 2700000, 1600000, 380000, 7000],  //value是具体数据
						symbol: 'triangle',
						symbolSize: 5,  //设置单个数据标记的大小
						//设置拐点标志样式
						itemStyle: { normal: { borderColor: 'blue', borderWidth: 3 } },
						//设置单项线条样式
						lineStyle: { normal: { color: 'red', width: 1, opacity: 0.9 } },
						//areaStyle: {normal:{color:'red'}}  //设置单项区域填充样式
					},
					{   //设置第2个数据项
						name: '男', value: [4600000, 2300000, 1900000, 420000, 13000],
						symbol: 'circle',
						symbolSize: 5,  //设置单个数据标记的大小
						itemStyle: { normal: { borderColor: 'rgba(51,0,255,1)', borderWidth: 3, } },
						lineStyle: { normal: { color: 'blue', width: 1, opacity: 0.9 } },
						//areaStyle:{normal:{color:'blue'}}  //设置单项区域填充样式
					}
				]
			},]
		};
		//使用刚指定的配置项和数据显示图表
		myChart.setOption(option); 
	</script>
</body>

</html>